今日目標: 使用Polymer Vulcanize 打包，了解如何使用Yeoman

使用Polymer開發Web應用，元件慣例是一個html檔案存放，方便管理。但每個元件都是一個html，只要用到三個元件，瀏覽器就需發出3次request，所以元件多、網路慢就會影響使用體驗。

舉例來說，Polymer官網的計算機App，按鍵顯示面板是元件、觸控面板也元件，每個元件都是html，載入這個計算機App，瀏覽器總共需要發出20個Request。

這些request包含了下面資源

1. 計算機App 的html (1個)
2. 各個元件的 html (13個)
3. polymer底層 platform.js , polymer.js (2個)
4. 計算機字型檔 (4個)

本機開發時網路快沒感覺，但真正運行環境使用就有可能是問題，因此Polymer官網很貼心地推出打包工具 Vulcanize 來幫忙處理這"雜事"

Vulcanize 使用介紹

安裝方式

用npm進行安裝

sudo npm install -g vulcanize

使用方式 (1)

vulcanize -o 輸出的檔名 準備要打包的檔名，如下

vulcanize -o build.html index.html

使用方式 (2)

加上 --inline 參數連JS一起打包進 html

vulcanize -o build.html index.html --inline

使用方式 (3)

防止xss攻擊，將js檔案另外打包

vulcanize -o build.html index.html --inline --csp 3.js

使用方式 (4)

瘦身，移除程式註解、沒用的空白字元

vulcanize -o build.html index.html --inline --csp 3.js --strip

...更多使用方式與設定可參考 [Vulcanize github]

使用 Vulcanize

使用方式(1) 可以將指定html所包含用到的元件html，打包成新的html檔案 (例如1.html)，request可減少到剩下 8個request

[打包程式範例] [線上範例]

使用方式(2) ，可以進一步將引用到的js也打包到html裡面，request剩下6個reqeust，剩下其他5個是載入字型所需的request

[打包程式範例] [線上範例]

不過使用方法(2) 將js也打包到html，違反CSP (Content Security Policy)，

可能會造成XSS攻擊。所以可以改用 使用方式(3) 來打包js到指定的檔案。

[打包程式範例] [線上範例]

=

解決Web元件打包後，發現原來Yeoman也有提供Polymer + Vulcanize 產生器 (generator-polymer-gulp)，所以接下來再搭配Yeoman就可以把整個開發流程串起來了

加碼演出~

generator-polymer-gulp 使用介紹

安裝方式

npm install generator-polymer-gulp

建立專案目錄 (針對開發一個Polymer元件)

mkdir my-polymer-component && cd $_

建立開發Polymer元件的環境

yo polymer-gulp

整個專案打掉重新建構 (clean、build)

gulp

開發完要打包成整個目錄，目錄名稱為 {{元件名稱}}_dist

npm run pre-publish

按照上面步驟就可以輕鬆完成開發一個Polymer元件，所需的開發環境，並且自動打包完成，而且工具會幫忙打包出上述使用方式(1)~(3)任君挑選，就在 專案目錄(yo) 下的 / _dist / _vulcanize 目錄下

參考文件

• Concatenating Web Components with Vulcanize
• Building Web Apps With Yeoman And Polymer